<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>欢迎来到海之能的网站</title>
	<link rel="shortcut icon" type="image/x-icon" href="http://okowaawz9.bkt.clouddn.com/favicon.ico" media="screen" />
</head>
<style>
	*{
		margin: 0px;
		padding: 0px;
		font-family: '微软雅黑';
	}
	.firstofall{
		width: 88%;
		height: 100px;
		/*background: url(images/firstofall.png);*/
	/*	background: #ccc;*/
		margin: 0 auto;
		margin-top: 20px;

	}
	.firstofall img{
		width: 150px;
		height: 100px;
		display: inline-block;
		float: left;
	/*	background: #ccc;*/
		
	}
	.firstofall .kongge{
		width: 100px;
		height: 100px;
		display: inline-block;
		float: left;
		/*background: #ccc;*/
	}
	a:link{
		text-decoration: none;
		color: yellow;
	}
	a:visited{
		color: pink;
	}
	a:hover{
		color: red;
	}
	a:active{
		color: white;
	}
	/*body{
		background: url(http://okowaawz9.bkt.clouddn.com/banner3.jpg) no-repeat;
	}*/
	.content{
		width: 88%;
		height: 550px;
		background: rgba(75,25,125,0.3);
		margin: 0 auto;
		background-image: url(http://okowaawz9.bkt.clouddn.com/banner3.jpg);
		background-position: 1340px  top;
	}

	.lalal{
		width: 88%;
		height: 50px;
		/*background: #ccc;*/
		margin: 0 auto;
	}
	.lalal .liuyan{
		width: 100px;
		line-height: 40px;
		background: #666;
		text-align: center;
		display: inline-block;
		float: right;
		
	}
	.aboutme{
		float: right;
		display: inline-block;
		width: 100px;
		line-height: 40px;
		text-align: center;
		background: #444;
	}
	/*.middle1{
		background-image: url(http://okowaawz9.bkt.clouddn.com/banner3.jpg);
		background-position: 1415px top;
	}*/
	
	.nav{
		width: 88%;
		height: 40px;
		margin: 00px auto;
		margin-top: 000px;
		background: skyblue;
		position: relative;

	}
	.nav>li{
		width: 31%;
		list-style: none;
		height: 40px;
		margin-left: 1.8%;
		background: green;
		float: left;
		/*display: inline-block;*/
		line-height: 40px;
		text-align: center;
		position: relative;
	}
	.sub{
		/*display: none;*/
		width: 100%;
		position: absolute;
		left: 0px;
		top: 40px;
	}
	.sub li{
		list-style: none;
		border: 1px solid #333;
		background: rgba(0,100,50,0.9);
		transition: all 1s;
		opacity: 0;
		transform: rotateY(180deg)

	}
	/*.nav>li:hover .sub{
		display: block;
	}*/

	.nav>li:hover .sub li{
		transform: none;
		opacity: 1;
	}
	.nav>li:hover .sub li:nth-child(1){
		transition-delay: 0ms;
	}
	.nav>li:hover .sub li:nth-child(2){
		transition-delay: 100ms;
	}
	.nav>li:hover .sub li:nth-child(3){
		transition-delay: 200ms;
	}
	.nav>li:hover .sub li:nth-child(4){
		transition-delay: 300ms;
	}
	.nav>li:hover .sub li:nth-child(5){
		transition-delay: 400ms;
	}
	.nav>li .sub li:nth-child(5){
		transition-delay: 0ms;
	}
	.nav>li .sub li:nth-child(4){
		transition-delay: 100ms;
	}
	.nav>li .sub li:nth-child(3){
		transition-delay: 200ms;
	}
	.nav>li .sub li:nth-child(2){
		transition-delay: 300ms;
	}
	.nav>li .sub li:nth-child(1){
		transition-delay: 400ms;
	}
	.content:hover{
		position: relative;
		z-index: 998;
	}
	.footer{
		color: gray;
		text-align: center;
	}
</style>
<body>
	<div class="firstofall">
	<div class="kongge"></div>
	<div>
		<a href="http://www.dobetter.win/" target="_blank"><img src="http://okowaawz9.bkt.clouddn.com/firstofall.png" alt="" title="加油，只为更好点"></a>
	</div>	
	</div>
	<div class="middle1">
	<ul class="nav">
		<li>我的学习
			<ul class="sub">
				<li>HTML</li>
				<li><a href="webcss.html">CSS</a></li>
				<li><a href="webscript.html">JavaScript</a></li>
				<li>PHP</li>
				<li>SQL</li>
			</ul>
		</li>
		<li>我的作品		
<ul class="sub">
				<li><a href="webgis.html"> WebGIS</a></li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>我的资源		
<ul class="sub">
				<li><a href="office.html"> 办公资源</a></li>
				<li><a href="ArcGIS.html"> ArcGIS资源</a></li>
				<li><a href="makecode.html"> 编程资源</a></li>
				<li><a href="videoscript/index.html" target="_blank">VIP视频解析</a></li>
				<li>其他资源</li>
			</ul>
		</li>
	</ul>
	<div class="content">
		欢迎来到dobetter.win的网站，
	</div>
	<div class="lalal">
	<span class="aboutme"><a href="aboutme.html">关于我</a></span>
	<div class="liuyan"><a href="http://user.qzone.qq.com/673598118/334"> 留言建议</a>
	</div></div><br><br>
	<h5 class="footer">Copyright © 2016 - 2017 Cenergy. All Rights Reserved</h5>
	</div>
</body>
</html>
